<template>
	<view>
		<view class="topWin" ref="topWin">
			<searchNavbar :parameter="parameter" :isMap="isMap" v-if="mapScaleNow<mapScaleMax"
				@chooseStore="chooseStore" @changeCity="changeCity" ref="searchMap" :openSysHeight="true">
				<text slot="title" style="color:#fff;font-size: 24rpx;">
					地图找铺
				</text>
			</searchNavbar>
			<!-- 		<searchNavbar :parameter="parameter" :isMap="isMap" :openSysHeight="true" bs="indexList"
				@cityChange="cityChange"></searchNavbar> -->
			<view class="category-box" v-if="mapScaleNow<mapScaleMax" ref="categoryBox ">
				<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;">
					<view v-for="(item,index) in categoryList" :key="index" @click="categoryClick(index)"
						:class="['category',categoryOn==index?'category-on':'']">{{item}}</view>
				</scroll-view>
			</view>
			<view class="sort-box" v-if="mapScaleNow<mapScaleMax" ref="sortBox">
				<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;">
					<view v-for="(item,index) in sortList" :key="index" :class="['sort',sortOn==index?'sort-on':'']"
						@click="sortClick(index)">
						{{item}}
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="page-section page-section-gap mapBox" ref="d">
			<map :style="{width: '100%',height: mapHeight}" id="map" ref="map" :scale="mapScale" :latitude="latitude"
				:min-scale="10" :max-scale="19" :show-location="true" :longitude="longitude" :markers="covers"
				@labeltap="mapLabelTap" @markertap="mapMarkerTap" @regionchange="mapRegionchangeMeth"
				:polygons="businessPolygons">
			</map>
			<button ref="btn" class="back-btn" @tap="backToMyLocation">
				<image class="bakImg" src="../static/images/sjdw.png"></image>
				<view style="font-size: 24rpx;">定位</view>
			</button>
		</view>
		<view class="acea-row row-middle row-between range-box" v-show="mapScaleNow<mapScaleMax">
			<view class="acea-row row-middle range-types">
				<view class="type-red	"> 半径</view>
				<!-- <view class="type-red"> 步行圈</view> -->
				<!-- 	<input class="uni-input" v-model="slideValue" focus placeholder="自动获得焦点" /> -->
			</view>
			<view class="slide-acea">
				<view class="slide-box">
					<slider @change="rangeSlideChange" step="0.5" :max="slideMax" :min="slideMin" activeColor="#ee212d"
						backgroundColor="#e7e7e7" block-size="16" :value="slideValue" />
				</view>
				<view class="acea-row row-middle row-between slide-num">
					<view>1km</view>
					<view>1.5km</view>
					<view>2km</view>
					<view>2.5km</view>
				</view>

			</view>
			<view class="acea-row row-middle" style="width: 20%;">
				<input class="uni-input zdyInp" confirm-type="search" v-model="zdyValue" placeholder="自定义"
					@confirm="zdySlide" /> km
			</view>
		</view>

		<view class="around-data-box" v-if="mapScaleNow<mapScaleMax">
			<view class="acea-row row-middle row-between title">
				<view class="title-l">周围数据报告</view>
				<view class="title-r">vip无限查，去开通</view>
			</view>
			<view class="acea-row row-middle row-between data-type">
				<view class="type-box" v-for="(item,index) in aroundDataType" :key="index">
					<image :src="item.image" mode=""></image>
					<view class="text">{{item.text}}</view>
					<view class="remask">
						{{item.remask}}
					</view>
				</view>
			</view>
		</view>
		<view :class="showShopList?'shop-list-t':'shop-list-b'" v-if="showShopList">
			<view v-if="!showShopList" class="shop-bottom">
				<view class="acea-row row-center">
					<cover-image class="top-jiantou" src="@/static/images/mapFinding/top_jiantou.png"
						@click="showShopList=!showShopList"></cover-image>
				</view>
				<view class="address">{{ datalist[mapMarkerIndex].addres || ''}}</view>
				<!-- <view class="shop-info">文和里商业街 | 在租2套</view> -->
			</view>
			<view v-if="showShopList" class="shop-bottom">
				<view class="acea-row row-middle row-between">
					<view class="bottom-jiantou" @click="showShopList=!showShopList"></view>
					<view class="address">{{ mod == 'marker'?(datalist[mapMarkerIndex].addres || ''):(showTitle)}}
					</view>
					<view></view>
				</view>
				<!-- 			<view class="filtration-list">
					<dropdown-screen></dropdown-screen>
				</view> -->
			</view>
			<scroll-view scroll-y="true" class="scroll-Y"
				:style="{height: showShopList ? 'calc(100% - 200rpx)': 'calc(100% - 150rpx)'}">
				<view class="scroll-view-item uni-bg-red">
					<view class="list" v-for="(item,index) in winListFilterData" :key="item.id">
						<!-- 	<shop-area v-if="item.status != 3 && item.status != 4" :list="[item]"
							:isTozx="false"></shop-area>
						<askRent v-else :item="item" /> -->
						<beCurrent :item="item" :isTozx="false" />
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import searchNavbar from '../components/searchNavbar/searchNavbar.vue'
	import dropdownScreen from '../components/dropdown-mapfind/dropdown-mapfind'
	import shopArea from '@/components/listItems/shopArea.vue'
	import askRent from '@/pages/others/components/listItems/askRent.vue'
	import beCurrent from '@/components/listItems/beCurrent.vue'
	import {
		Debounce
	} from '@/utils/validate.js'
	import {
		getInformationMapApi,
		BusinessList, //根据经纬度获取商圈信息
		selectListBusiness, //查询所有的商圈
		BusinessMapList,
	} from '@/api/api.js'
	import {
		getMapGroupListApi,
		MapBuyApi,
		MapAllApi
	} from '@/api/subletOfShop.js'
	import {
		getCategory,
		showLoading,
		toPage
	} from '@/filters/commFilter.js'
	export default {
		components: {
			searchNavbar,
			dropdownScreen,
			shopArea,
			askRent,
			beCurrent
		},
		data() {
			return {
				visitInfo: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				showShopList: false,
				slideMax: 2.5,
				slideMin: 1,

				mod: 'marker',
				isMap: false,
				categoryList: ['商铺', '写字楼', '公寓', '厂房', '仓库', '土地', '房屋'],
				categoryOn: 0,
				sortList: ['全部', '出租', '出售', '转让', '求租', '求购'],
				sortOn: 0,
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				markerId: '',
				mapScale: 12,
				mapHeight: '45vh',
				mapScaleNow: 19,
				mapScaleMax: 20,
				covers: [],
				winListData: [],
				winListFilterData: [],
				businessPolygons: [],
				latitude: '',
				longitude: '',
				parameter: {
					return: 1,
					placeholder: '商铺/写字楼/门面',
					categoryType: 1
				},
				// latitude: 26.579593658447,
				// longitude:  106.72406768799,
				aroundDataType: [{
						image: '../../../static/images/mapFinding/mapF01.png',
						text: '查客源',
						remask: '查客源&商圈'
					},
					{
						image: '../../../static/images/mapFinding/mapF02.png',
						text: '查房价',
						remask: '二手房价(元)'
					},
					{
						image: '../../../static/images/mapFinding/mapF03.png',
						text: '查消费',
						remask: '人均消费(元)'
					},
					{
						image: '../../../static/images/mapFinding/mapF04.png',
						text: '查同行',
						remask: '竞争对手'
					},
					{
						image: '../../../static/images/mapFinding/mapF05.png',
						text: '查交通',
						remask: '公交/地铁'
					}
				],
				mapContext: null,
				timer: null,
				slideValue: 1,
				mapMarkerIndex: 0,
				datalist: [],
				cityId: '',
				zdyValue: 1,
				isShowList: false,
				_mapContext: null,
				bscale: 12.5,
				cscale: 15,
				businessPage: 1,
				showTitle: ''
			};
		},
		onShow() {

		},
		watch: {
			mapScaleNow(newVal, oldVal) {
				// this.mapRegionchange({
				// 	type: 'end'
				// })
				let that = this;
				if (newVal < 13) {
					const query = uni.createSelectorQuery().in(this);
					query.select('.topWin').boundingClientRect(data => {
						// console.log("得到布局位置信息", data.height);
						that.mapHeight = `calc( 100vh - ${data.height + 65}px)`
					}).exec();
				} else {
					// that.mapHeight = "45vh"
				}

			}
		},
		onLoad(options) {
			this.cityId = this.$city
			let lo = this.$chooseLocation ? this.$chooseLocation : this.$location;
			this.latitude = lo.latitude;
			this.longitude = lo.longitude;
			this.mapContext = uni.createMapContext("map", this);

			// 点聚合
			this.mapContext.on("markerClusterClick", (e) => {
				console.log("markerClusterClick ", e)
			})
			if (options.location) {
				let loc = JSON.parse(options.location)
				if (loc.distance) {
					this.slideValue = Number(loc.distance.replace(/[km]/g, '')) < 1 ? this.slideValue : Number(loc.distance
						.replace(/[km]/g, ''));
					this.zdyValue = this.slideValue;
				}
				this.latitude = Number(loc.latitude) ? Number(loc.latitude) : this.latitude;
				this.longitude = Number(loc.longitude) ? Number(loc.longitude) : this.longitude;
				this.mapScale = 14
			}

			this.intervalFn();
			// this.getList()
			this.mapRegionchange({
				type: 'end'
			}, this)
		},

		mounted() {

		},
		onReady() {
			// this._mapContext = uni.createMapContext("map", this);
			// this._mapContext.initMarkerCluster({ // 初始化点聚合的配置
			// 	enableDefaultStyle: false, // 是否使用默认样式
			// 	zoomOnClick: true,
			// 	gridSize: 60,
			// 	complete(res) {

			// 	}
			// });
			// // 点聚合
			// this._mapContext.on("markerClusterCreate", (e) => {
			// 	console.log("markerClusterCreate", e)
			// })

		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		methods: {
			toPage,
			//针对点聚合做的处理
			clusterCreate(e) {
				console.log(e)
				let clusterMarkers = []
				const clusters = e.clusters // 新产生的聚合簇
				clusters.forEach((cluster, index) => {
					const {
						center, // 聚合点的经纬度数组
						clusterId, // 聚合簇id
						markerIds // 已经聚合了的标记点id数组
					} = cluster
					let m = {
						...center,
						name: it.businessName,
						width: 0, //宽
						height: 0, //高
						id: clusterId,
						joinCluster: true,
						label: { // 定制聚合簇样式
							content: it.businessName + '',
							fontSize: 13,
							color: '#fff',
							width: 80,
							height: 40,
							bgColor: '#FF0000',
							borderRadius: 25,
							textAlign: 'center',
							anchorX: -10,
							anchorY: -35,
						}
					}
					clusterMarkers.push(clusterObj)
				})
				// 添加聚合簇
				this._mapContext.addMarkers({
					markers: clusterMarkers,
					clear: false, //是否先清空地图上所有的marker
				})
			},
			//选择商铺
			chooseStore(item) {
				this.initData()
			},
			//选择城市
			changeCity(val) {
				let lo = this.$chooseLocation ? this.$chooseLocation : this.$location;
				this.mapContext.moveToLocation({
					latitude: lo.latitude,
					longitude: lo.longitude
				});
				this.initData()


			},
			toDetail() {
				wx.navigateTo({
					url: '/pages/details/shopRent/shopRent'
				})
			},
			rangeSlideChange(e) {
				this.slideValue = e.detail.value
				this.zdyValue = e.detail.value
				this.initData()
			},
			//自定义范围距离
			zdySlide() {
				if (this.zdyValue > this.slideMax) {
					this.slideValue = this.slideMax
				} else {
					this.slideValue = this.zdyValue
				}
				this.initData();
			},
			mapLabelTap(e) {
				let that = this;
				this.mapScale = this.mapScaleNow;
				let cover = this.covers.filter(item => item.id == e.detail.markerId)
				if (cover.length > 0) {
					let c = cover[0];
					console.log(c)
					// c.latitude;
					if (c.type == 'business') {
						// this.mod = 'business'
						// this.showTitle = c.name
						// this.getList(c.id)
						this.mapContext.moveToLocation({
							latitude: c.latitude,
							longitude: c.longitude,
							success: () => {
								// that.mapScale = 14
								setTimeout(() => {
									that.mapScale = 16;
								}, 300)
							},
						});
					} else {
						this.mapContext.moveToLocation({
							latitude: c.latitude,
							longitude: c.longitude,
							success: () => {
								// that.mapScale = 14
								setTimeout(() => {
									that.mapScale = 13;
								}, 300)
							}
						});

					}
				}
			},
			mapMarkerTap(e) {
				var id = e.markerId
				let index = 0

				// var name = this.covers[id - 1].name
				for (let i = 0; i < this.covers.length; i++) {
					if (id == this.covers[i].id) {
						index = i
					}
				}

				this.mod = 'marker'
				this.mapMarkerIndex = index
				this.winListFilterData = [this.covers[index].con]
				this.showShopList = true
			},
			/* 获取地图缩放级别-定时判断 */
			/* 14展示商圈   12展示城区
			 *
			 */
			intervalFn() {
				this.timer = setInterval(() => {
					this.mapContext.getScale({
						success: (res) => {
							let _result = [];
							let _obj = {};
							let scale = res.scale;
							if (this.mapScaleNow != res.scale) {
								this.mapScaleNow = scale;
								// if((res.scale - this.mapScale >1)||(this.mapScale-res.scale >1)){
								// 	this.mapScale = res.scale;
								// }
								// this.$nextTick(()=>{
								// 	this.mapScale = res.scale
								// })
								if (this.mapScaleNow < 14) {
									this.mapRegionchange({
										type: 'end'
									}, this)
								} else {
									this.initData();
								}
							}
							// console.log(this.covers)

							if (scale > 20) {

							}
						}
					})
				}, 500)
			},
			backToMyLocation() {
				this.mapContext.moveToLocation();
				this.mapScale = 15.5
			},
			onMapCreated() {
				const mapComponent = this.$children.find(child => child.$options.name === 'uni-map');
				if (mapComponent) {
					mapComponent.moveToLocation();
				}
			},
			getDistance: function(lat2, lng2) {
				// var lat1 = this.latitude || 0;
				// var lng1 = this.longitude || 0;
				// lat2 = lat2 || 0;
				// lng2 = lng2 || 0;
				// var rad1 = lat1 Math.PI / 180.0;
				// var rad2 = lat2 Math.PI / 180.0;
				// var a = rad1 - rad2;
				// var b = lng1 Math.PI / 180.0 - lng2 Math.PI / 180.0;
				// var r = 6378137;
				// this.distance = (r 2 Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) Math.cos(rad2) Math
				// .pow(Math
				// .sin(b / 2), 2)))).toFixed(0)
			},
			//点击切换商铺类型
			categoryClick(index) {
				this.categoryOn = index;
				this.initData()
			},
			//点击切换
			sortClick(index) {
				this.sortOn = index;
				this.initData()
			},
			initData() {
				this.covers = [];
				this.datalist = [];
				if (this.mapScaleNow >= 14) {
					this.getList()
				}

			},
			async getList(businessCircle) {
				console.log("ad")
				this.covers = []
				let data = {}
				let params = {
					status: [0, 4, 5].includes(this.sortOn) ? '' : this.sortOn - 1,
					limit: 99999,
					storeCategory: getCategory(this.categoryOn).value,

				};
				if (!businessCircle) {
					params = {
						...params,
						distances: this.zdyValue * 1000,
						latitude: this.$location.latitude,
						longitude: this.$location.longitude,
						city: this.cityId
					}
				} else {
					params = {
						...params,
						page: this.businessPage,
						limit: 10,
						businessCircle
					}
					if (this.businessPage == 1) {
						this.winListData = [];
						this.winListFilterData = []
					}
				}
				// showLoading()
				switch (this.sortOn) {
					case 0:
						data = await MapAllApi(params)
						break;
					case 4:
						data = await getMapGroupListApi(params)
						break;
					case 5:
						data = await MapBuyApi(params)
						break;
					default:
						data = await getInformationMapApi(params)
						break;
				}
				let {
					list
				} = data.data;
				if (businessCircle) {
					console.log('list', list)
					list.forEach(item => {
						item.list.forEach(item => {
							if (item.askrentId) {
								item['status'] = 3
							} else if (item.buystoreId) {
								item['status'] = 4
							}
						})
						this.winListData = [...this.winListData, ...item.list]
					})
					// this.winListFilterData = this.winListData;
					this.showShopList = true
					uni.hideLoading();
					return;
				}
				if (this.sortOn != 0) {
					this.datalist = list;
				} else {
					list.forEach((item) => {
						item.list.forEach(child => {
							if (child.askrentId) {
								child['status'] = 3;
							} else if (child.buystoreId) {
								child['status'] = 4
							}
							this.datalist.push(child)
						})
					})
				}
				this.winListData = this.datalist
				this.winListFilterData = this.datalist
				let dc = this.datalist.map(item => {
					return {
						longitude: Number(item.longitude),
						latitude: Number(item.latitude),
						name: item.title,
						iconPath: 'https://image.shanghepu.com/cdn/images/dingwei.png',
						width: 30, //宽
						height: 30, //高
						con: {
							...item
						},
						id: item.buystoreId ? Number(item.buystoreId) : (item.askrentId ? Number(
							item
							.askrentId) : Number(item.id))
					}
				})
				this.covers = dc
				console.log("covers", this.covers)
				// this.mapRegionchange({
				// 	type: "end"
				// })
				// uni.hideLoading();
			},
			toConcat(contact) {
				if (!contact || contact.length < 1) {
					this.$util.Tips({
						title: '暂未获取到联系人'
					})
					return;
				}

				getApp().globalData.into_singleChatRoom({
					phone: contact[0].contactPhone,
					contactId: contact[0].contactId,
				})
			},
			mapRegionchangeMeth(e) {
				this.mapRegionchange(e, this)
			},
			mapRegionchange: Debounce((e, that) => {
				console.log('that.mapScaleNow', e.type == 'end' && that.mapScaleNow < 14, that.mapScale)
				if (e.type == 'end' && that.mapScaleNow < that.cscale) {
					that.mapContext.getRegion({
						success: res => {
							let obj = {
								latitude: {
									min: res.southwest.latitude.toString(),
									max: res.northeast.latitude.toString()
								},
								longitude: {
									min: res.southwest.longitude.toString(),
									max: res.northeast.longitude.toString()
								}
							}
							that.getBusiness(obj, that)
						},
						fail: (data, code) => {
							console.log('fail' + JSON.stringify(data));
						}
					})

					// this.getBusiness(e.detail.centerLocation.latitude, e.detail.centerLocation.longitude)
				} else if (that.mapScaleNow >= that.cscale) {
					// that.getList()
				}
			}),
			// 获取商圈
			getBusiness: Debounce((obj, that) => {
				// that.covers = [];
				BusinessMapList({
					topLeft: obj.longitude.min,
					topRight: obj.latitude.min,
					bottomRight: obj.longitude.max,
					bottomLeft: obj.latitude.max,
					storeCategory: getCategory(that.categoryOn).value,
				}).then(res => {
					if (res.code == 200 && res.data) {
						// that.covers = that.covers.filter(item=>item.type!='business');
						// console.log('that.covers',that.covers)
						that.covers = that.covers.filter(item => {
							if (item.type) {
								if (that.mapScaleNow >= that.bscale && that.mapScaleNow < that
									.cscale) {
									return item.type == 'business'
								} else if (that.mapScaleNow < that.bscale) {
									return item.type == 'region'
								} else {
									return false;
								}
							} else {
								return false;
							}
						})

						res.data.forEach(it => {
							let p = []
							let points = it.positionBorder.split(';').map(item => {
								p.push([{
									lng: item.split(',')[0],
									lat: item.split(',')[1]
								}])
								return {
									longitude: item.split(',')[0],
									latitude: item.split(',')[1]
								}
							})
							let d = {
								points,
								strokeColor: '#FF0000 ',
								fillColor: 'transparent',
								businessId: it.businessId
							}
							if (that.mapScaleNow >= that.bscale && !(that.businessPolygons.find(
									item => item.businessId == it.businessId))) {
								// if (!(that.businessPolygons.find(item => item.businessId == it.businessId))) {
								that.businessPolygons.push(d)
								// console.log('that.covers 完成',that.covers)
							} else if (that.mapScaleNow < that.bscale) {
								that.businessPolygons = []
							}
							// if (!(that.covers.find(item => item.id == it.businessId))) {
							if (that.mapScaleNow >= that.bscale && !(that.covers.find(item =>
									item.id == it.businessId))) {
								//获取中心点
								let cent = that.$util.getCenterPoint(p);
								let m = {
									longitude: cent.lng,
									latitude: cent.lat,
									name: it.businessName,
									width: 0, //宽
									height: 0, //高
									id: it.businessId ? Number(it.businessId) : Math.floor(Math
										.random() * (5000 - 10 + 1)) + min,
									type: 'business',
									// joinCluster: true,
									label: { // 定制聚合簇样式
										content: it.businessName + '(' + it
											.statistics + ')',
										fontSize: 13,
										color: '#fff',
										width: 90,
										height: 40,
										bgColor: '#FF0000',
										borderRadius: 25,
										textAlign: 'center',
										anchorX: -15,
										anchorY: -35,
									}
								}
								that.covers.push(m)
							} else if (that.mapScaleNow < that.bscale) {
								// let hasCovers= that.covers.filter(item=>item.id ==  it.district)
								if (that.covers.find(item => item.id == it.district)) {
									return;
								}
								let cent = that.$util.getCenterPoint(p);
								let m = {
									longitude: cent.lng,
									latitude: cent.lat,
									name: it.businessName,
									width: 0, //宽
									height: 0, //高
									id: it.district ? Number(it.district) : Math.floor(Math
										.random() * (5000 - 10 + 1)) + min,
									type: 'region',
									// joinCluster: true,
									label: { // 定制聚合簇样式
										content: it.districtName,
										fontSize: 13,
										color: '#fff',
										width: 90,
										height: 40,
										bgColor: '#FF0000',
										borderRadius: 25,
										textAlign: 'center',
										anchorX: -15,
										anchorY: -35,
									}
								}
								that.covers.push(m);
							}
						})
						// 添加聚合簇
						// that._mapContext.addMarkers({
						// 	markers: that.covers,
						// 	clear: false, //是否先清空地图上所有的marker
						// })
					}

				})


			}, 500),
			reloadBusinessMarker() {

			}
		},

	}
</script>

<style lang="scss">
	.category-box {
		width: 100%;
		padding: 18rpx 30rpx;
		background: #ffffff;

		.category {
			display: inline-block;
			white-space: nowrap;
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(50, 50, 51, 1);
			padding: 12rpx 0rpx;
			margin-right: 54rpx;
		}

		.category-on {
			font-weight: 700;
			color: rgba(238, 33, 45, 1);
		}
	}

	.sort-box {
		width: 100%;
		padding: 0 30rpx 30rpx;
		background: #ffffff;

		.sort {
			display: inline-block;
			white-space: nowrap;
			border-radius: 10rpx;
			background: rgba(247, 247, 247, 1);
			padding: 12rpx 36rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(50, 50, 51, 1);
			margin-right: 18rpx;
		}

		.sort-on {
			color: #ffffff;
			background: rgba(238, 33, 45, 1);
		}
	}

	.range-box {
		padding: 36rpx 10rpx;

		.range-types {
			width: 132rpx;
			height: 68rpx;
			font-size: 28rpx;
			font-weight: 500;
			background: rgba(247, 247, 247, 1);


			.type-white {
				width: 50%;
				text-align: center;
				line-height: 68rpx;
				border-radius: 10rpx 0 0 10rpx;
				background: rgba(255, 255, 255, 1);
			}

			.type-red {
				width: 100%;
				text-align: center;
				line-height: 68rpx;
				border-radius: 10rpx;
				background: rgba(255, 0, 0, 1);
				color: #ffffff;
			}
		}

		.slide-acea {
			width: calc(100% - 350rpx);

			.slide-box {
				slider {
					margin: 0 !important;
				}
			}

			.slide-num {
				font-size: 22rpx;
				color: rgba(0, 0, 0, 1);
			}
		}
	}

	.around-data-box {
		padding: 36rpx 30rpx;
		background: #ffffff;

		.title {
			.title-l {
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(34, 34, 34, 1);
			}

			.title-r {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
				padding-right: 24rpx;
				position: relative;

				&::after {
					content: '';
					display: block;
					width: 12rpx;
					height: 12rpx;
					position: absolute;
					right: 0;
					top: 50%;
					margin-top: -8rpx;
					border-top: 2px solid rgba(238, 33, 45, 1);
					border-right: 2px solid rgba(238, 33, 45, 1);
					transform: rotate(45deg);
				}
			}
		}

		.data-type {
			margin-top: 36rpx;

			.type-box {
				text-align: center;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				.text {
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);
				}

				.remask {
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(189, 187, 187, 1);
				}
			}
		}
	}

	.shop-list-b {
		// position: sticky;
		left: 0;
		bottom: 0;
		z-index: 999999999999;
		background: #ffffff;
		padding: 36rpx 0;
	}

	.shop-list-t {
		position: fixed;
		left: 0;
		bottom: 0;
		// top: 290rpx;
		z-index: 999999999999;
		right: 0;
		background: #f7f7f7;
	}

	.top-jiantou {
		width: 56rpx;
		height: 20rpx;
		margin-bottom: 36rpx;
	}

	.shop-bottom {

		.address {
			font-size: 36rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
			padding: 12rpx 36rpx;
		}

		.shop-info {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
			margin: 12rpx 36rpx;
			border-bottom: 1px solid #e5e5e5;
			padding-bottom: 36rpx;
		}
	}

	// 列表
	.list {
		padding: 14rpx 36rpx;

		.item {
			margin-bottom: 14rpx;
			border-radius: 10rpx;
			background: #ffffff;
			padding: 16rpx;
			overflow: hidden;

			.top-info {
				padding: 16rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(191, 186, 186, 1);

				.close {
					font-size: 36rpx;
				}
			}

		}
	}

	// 全部列表
	.all {
		.sell-goods {
			.goods-img {
				width: 256rpx;
				height: 216rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;
				background-color: #cccccc;

				.img {
					width: 100%;
					height: 100%;
				}

				.tag {
					padding: 0 6rpx;
					max-width: 356rpx;
					height: 36rpx;
					border-radius: 0px 10rpx 0px 10rpx;
					background: rgba(238, 33, 45, 1);
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
				}

				.distance {
					width: 100%;
					padding: 12rpx;
					background: rgba(0, 0, 0, .3);
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);

					image {
						width: 14rpx;
						height: 18rpx;
						margin-right: 12rpx;
					}

					position: absolute;
					bottom: 0;
					left: 0;
				}
			}

			.goods-info {
				width: calc(100% - 268rpx);
				height: 216rpx;

				.title {
					width: 100%;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(56, 56, 56, 1);
				}

				.sell-price {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(238, 33, 45, 1);

					text {
						font-size: 36rpx;
						font-weight: 700;
					}
				}

				.transfer-price {
					margin-left: 18rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);

					text {
						font-weight: 700;
					}
				}

				.gold-coin {
					width: 148rpx;
					max-width: 100%;
					padding: 4rpx 12rpx;
					// height: 36rpx;
					border-radius: 20rpx;
					background: rgba(255, 195, 0, 1);
					border: 1px solid rgba(255, 235, 59, 1);
					position: relative;

					image {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						left: 0;
						top: 0;
					}

					.num {
						margin-left: 36rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}
				}

				.goods-tag {
					.tag-tit {
						padding: 6rpx 0rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(250, 92, 103, 1);
					}

					.tag {
						white-space: nowrap;
						border-radius: 4px;
						background: rgba(255, 232, 234, 1);
						padding: 6rpx 8rpx;
						margin-right: 12rpx;
						margin-bottom: 6rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
					}

					.tag:last-child {
						margin-right: 0;
					}
				}
			}
		}

		// 适合场所

		.suitable-box {
			margin-top: 34rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(82, 104, 139, 1);

			// padding-bottom: 30rpx;
			// border-bottom: 1px solid rgba(238, 238, 238, 1);
			.suitable {
				display: inline-block;
				letter-spacing: 0.4rpx;
				padding: 10rpx;
				border-radius: 4rpx;
				background: rgba(248, 249, 253, 1);
				margin-left: 12rpx;
				white-space: nowrap;
			}
		}

		.visit-box {
			padding: 30rpx 0;
			margin-top: 30rpx;
			border-top: 1px solid rgba(238, 238, 238, 1);

			.visit-advtar-box {
				width: 70%;

				.visit-num {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-top: 26rpx;
				}

				.visit-advtar {
					width: 100%;
					height: 46rpx;
					position: relative;

					image {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						position: absolute;
					}
				}
			}

			.visit-l {
				width: 30%;

				.visit-num {
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-bottom: 12rpx;
				}

				.visit-btn {
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					opacity: 1;
					border-radius: 30rpx;
					background: rgba(238, 33, 45, 1);
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}


		}
	}



	.shop-bottom {
		background: #ffffff;
		padding: 18rpx 36rpx 36rpx;

		.bottom-jiantou {
			width: 18rpx;
			height: 18rpx;
			border-right: 1px solid rgba(56, 56, 56, 1);
			border-bottom: 1px solid rgba(56, 56, 56, 1);
			transform: rotate(45deg);
		}
	}

	.zdyInp {
		width: 66%;
		border: 1px solid #ccc;
		margin-right: 10rpx;
		padding: 10rpx 10rpx;
		font-size: 28rpx;
		text-align: center;
		height: 60rpx;
	}

	.mapBox {
		position: relative;
	}

	.back-btn {
		position: absolute;
		bottom: 30rpx;
		right: 0;
		padding: 15rpx 15rpx;
		border-radius: 100%;
		background-color: rgba(255, 255, 255, .3);
		font-size: 20rpx;
		color: red;
		background-color: transparent;
	}

	.bakImg {
		width: 60rpx;
		height: 60rpx;
	}
</style>